<template>
  <div class="search">
    <div class="search-hearch">
      <n-input 
        class="search-input" 
        placeholder="你在找什么？" 
        size="large" 
        maxlength="200" 
        v-model:value="query.keyWord"
      >
        <template #prefix>
          <i class="iconfont icon-sousuo"></i>
        </template>
      </n-input>
      <button 
        class="btn" 
        v-if="query.keyWord" 
        @click="getProduct(query.keyWord)"
      >
        搜  索
      </button>
    </div>
    <div class="page-nav" v-if="!productList.length">
      <div class="page-label">热门商品</div>
      <div class="page-product-length">
        {{ popularProducts.length }}件商品
      </div>
      <div class="popular-products">
        <div 
          class="product-item"
          v-for="(v, i) in popularProducts" :key="i"
          @click="goProdictDeatil(v.id)"
        >
          <img class="cove" :src="v.img[0]" />
          <div>
            <p class="product-name">{{ v.name }}</p>
            <p class="product-explain">{{ v.explain }}</p>
            <p class="product-price">
              <i>￥</i>
              <span>{{ v.price }}</span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="page-nav" v-else>
      <div class="page-label">匹配商品</div>
      <div class="page-product-length">
        {{ productList.length }}件商品
      </div>
      <div class="popular-products">
        <div 
          class="product-item"
          v-for="(v, i) in productList" :key="i"
          @click="goProdictDeatil(v.id)"
        >
          <img class="cove" :src="v.img[0]" />
          <div>
            <p class="product-name">{{ v.name }}</p>
            <p class="product-explain">{{ v.explain }}</p>
            <p class="product-price">
              <i>￥</i>
              <span>{{ v.price }}</span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <bottomBar />
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { NInput } from "naive-ui";
import BottomBar from "@/components/appBase/bottomBarBase.vue";
import { get_product_data } from "@/appModel/product.model.js";

const route = useRoute();
const router = useRouter();
const query = ref({ keyWord: "" });
const popularProducts = ref(get_product_data({ id: [3, 6, 12, 13, 15, 17, 18] }));
const productList = ref([]);

const goProdictDeatil = (id) => {
  router.push({
    path: "/product/detail",
    query: { id }
  });
};

const getProduct = (keyWord) => {
  productList.value = get_product_data({ keyWord: keyWord });
};

onMounted(() => {
  if (route.query && route.query.keyWord) {
    query.value.keyWord = route.query.keyWord;
    getProduct(query.value.keyWord);
  }
});

</script>
<style lang="scss" scoped>
.search {
  margin: 0 auto;
  width: 7.5rem;
  position: relative;
  &::before {
    width: 7.5rem;
    height: 1.2rem;
    content: "";
    display: block;
  }
  .search-hearch {
    padding: 0.2rem 0.3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    background: rgba($color: #090b1a, $alpha: 0.95);
    box-shadow:0 0 0.13rem 0.08rem rgba($color: #090b1a, $alpha: 0.98);
    width: 7.5rem;
    position: fixed;
    top: 0;
    .search-input {
      border: 1px solid #fff;
      color: #fff;
      font-weight: bolder;
      font-size: 0.23rem;
      .iconfont {
        color: #fff;
      }
    }
    .btn {
      position: absolute;
      right: 0.2rem;
      padding: 0.15rem;
      font-size: 0.2rem;
      width: 1.2rem;
      background: none;
      border: none;
      color: #fff;
      border-radius: 0.1rem;
      font-weight: bolder;
    }
  }
  .page-nav {
    padding: 0.2rem 0.3rem;
    width: 100%;
    .page-label {
      font-size: 0.3rem;
      font-weight: bolder;
      color: #111;
    }
    .page-product-length {
      font-size: 0.2rem;
      color: #7f7f7f;
    }
    .popular-products {
      margin: 0.2rem 0;
      width: 100%;
      display: flex;
      align-items: flex-start;
      flex-wrap: wrap;
    }
    .product-item {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      background: #fff;
      margin: 0 0.5% 0.05rem;
      padding: 0.1rem;
      width: 49%;
      min-height: 4.3rem;
      .cove {
        margin: 0.2rem auto;
        width: 70%;
        border-radius: 0.1rem;
      }
      .product-name {
        margin-top: 0.2rem;
        font-size: 0.18rem;
        font-weight: bolder;
      }
      .product-explain {
        font-size: 0.16rem;
        color: #858585;
      }
      .product-price {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        i { font-size: 0.2rem; }
        span {
          font-size: 0.26rem;
        }
      }
    }
  }
}
</style>